<template>
	<div class="dis-inline p-r input-out">
		<div @click="detract(0)" class="left-btn">-</div>
		<div class="input-content">
			<input :value="value" pattern="\d*" @input="change($event)" type="number" class="number-input" />
		</div>
		<div @click="detract(1)" class="right-btn">+</div>
	</div>
</template>
<script>
	export default{
		props:{
			value:{

			},
			min:{
				type:Number,
				default:0
			},
			max:{},
			step:{
				type:Number,
				default:1
			},
			placeholder:{
				type:String,
				default:"",
			}
		},
		watch:{
			/*value(value){
				this.$emit('input',value);
			}*/
		},
		methods:{
			change(e){
				let value=e.target.value;
				//this.value=value;
				this.$emit('input',value);
				this.$emit('change',value);
			},
			detract(type){
				let value=this.value;
				if (type==0) {
					value=(!this.value||this.value-this.step<this.min)?this.min:parseInt(this.value)-this.step;
				}else{
					value=this.value?parseInt(this.value)+this.step:this.step;
				}
				this.$emit('input',value);
				this.$emit('change',value);
			}
		}
	}
</script>
<style scoped>
	.input-out{width: 200px;height: 64px;box-sizing:border-box;border: 1px solid #E9E9E9;border-radius: 8px;}
	.input-content{height: 100%;padding: 0px 64px;box-sizing:border-box;}
	.input-content input{height: 100%;padding: 15px 0px;text-align: center;font-size: 24px;box-sizing:border-box;vertical-align: top;}
	.left-btn{position: absolute;width: 62px;height: 62px;line-height: 60px;left: 0;top: 0;font-size: 36px;}
	.right-btn{position: absolute;width: 62px;height: 62px;line-height: 60px;right: 0;top: 0;font-size: 36px;}
	.number-input{width: 100%;height: 100%;border: 0;outline: 0;}
</style>